<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改密码</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->

      <!-- 用户列表区域 -->
      <el-form :data="userlist" border stripe>
        <el-form-item label="尊敬的用户！"></el-form-item>
      </el-form>

    </el-card>

    <!-- 修改密码的对话框 -->
    <el-dialog title="修改密码" :visible.sync="editPasswordVisible" width="50%" @close="editPasswordClosed">
      <el-form :model="editPasswordForm" :rules="editPasswordFormRules" ref="editPasswordFormRef" label-width="90px">
        <el-form-item label="输旧密码" prop="oldpwd">
          <el-input v-model="editPasswordForm.oldpwd"></el-input>
        </el-form-item>
        <el-form-item label="输新密码" prop="newpwd1">
          <el-input v-model="editPasswordForm.newpwd1"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="newpwd2">
          <el-input v-model="editPasswordForm.newpwd2"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editPasswordVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserPassword">确 定</el-button>
      </span>
    </el-dialog>

    <el-row :gutter="20">
      <el-col :span="4">
        <el-button type="primary" @click="showeditPassword">修改密码</el-button>
      </el-col>
    </el-row>

  </div>
</template>

<script>
    export default {
        data() {
            // 验证邮箱的规则

            return {
                // 获取用户列表的参数对象
                userlist: [],
                total: 0,
                // 控制修改用户对话框的显示与隐藏
                editPasswordVisible: false,
                // 查询到的用户信息对象
                editPasswordForm: {},
                // 修改表单的验证规则对象
                editPasswordFormRules: {
                    oldpwd: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 3, max: 15, message: '旧密码的长度在6~15个字符之间', trigger: 'blur'}
                    ],
                    newpwd1: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 3, max: 15, message: '新密码的长度在6~15个字符之间', trigger: 'blur'}
                    ],
                    newpwd2: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 3, max: 15, message: '重复户名的长度在6~15个字符之间', trigger: 'blur'}
                    ]
                },
                // 控制分配角色对话框的显示与隐藏
                setRoleDialogVisible: false,
                // 需要被分配角色的用户信息
                userInfo: {},
                // 所有角色的数据列表
                rolesList: [],
                // 已选中的角色Id值
                selectedRoleId: ''
            }
        },
        created() {

        },
        methods: {

            // 展示编辑用户的对话框
            async showeditPassword() {
                this.editPasswordVisible = true
            },
            // 监听修改用户对话框的关闭事件
            editPasswordClosed() {
                this.$refs.editPasswordFormRef.resetFields()
            },
            // 修改用户信息并提交
            editUserPassword() {
            	  let form = new FormData()
            	  form.append('oldOne	',this.editPasswordForm.oldpwd	)
            	  form.append('newOne',this.editPasswordForm.newpwd1)
                this.$refs.editPasswordFormRef.validate(async valid => {
                    if (!valid) return
                    // 发起修改用户信息的数据请求
                    if (this.editPasswordForm.newpwd1 !== this.editPasswordForm.newpwd2) {
                        return this.$message.error('新密码不一致！')
                    }

                    const {data: res} = await this.$http.put('/user/passwordReset',form)

                    if (res.code !== 200) {
                        return this.$message.error(res.msg)
                    }

                    // 关闭对话框
                    this.editPasswordVisible = false
                    // 刷新数据列表
                    // 提示修改成功
                    this.$message.success('更新密码成功！')
					window.sessionStorage.clear()
					this.$router.push('/login')
                })
            },

        }
    }
</script>

<style lang="less" scoped>
  .el-col {
    margin-top: 30px;
    float: right;
  }
</style>
